<template>
  <div class="home">
    <div class="header">
      <span></span>
      <span class="s1">新型冠状肺炎实时监控</span>
      <span class="s2">当前时间是:{{ data | dateTime }}</span>
    </div>
    <div class="main">
      <div class="left">
        <list-left></list-left>
      </div>
      <div class="middle">
        <list-center></list-center>
      </div>
      <div class="right">
        <list-right></list-right>
      </div>
    </div>
  </div>
</template>

<script>
import listLeft from "@/components/list-left.vue";
import ListCenter from "@/components/list-center.vue";
import ListRight from "@/components/list-right.vue";
export default {
  components: { listLeft, ListCenter, ListRight },
  data() {
    return {
      data: new Date()
    };
  },
  filters: {
    dateTime(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "年" + MM + "月" + d + "-" + h + "时" + m + "分" + s + "秒";
    },
  },

  mounted() {
    var that = this;
    this.timer = setInterval(() => {
      that.data = new Date(); //修改数据date
    }, 1000);
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  // background-color: plum;
  background: url(../assets/bg.a6333996.jpg) no-repeat #000;
  background-size: cover;
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .left {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      margin-bottom: 10px;
    }
    .middle {
      flex: 1.5;
      //  background-color: red;
      // margin-left: 10px;
    }
    .right {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      // margin-right: 10px;
      margin-left: 15px;
    }
  }

  .header {
    width: 100%;
    height: 100px;
    background: url(../assets/head_bg.eeff3da5.png) no-repeat;
    background-size: cover;
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .s1 {
      font-size: 40px;
    }
    .s2 {
      font-size: 20px;
      color: grey;
    }
  }
}
</style>

   